<script setup lang="ts">
import DialogComp from './components/DialogComp.vue';
import MyDialog from './components/MyDialog.vue'
</script>

<template>
  <!-- 2. 在使用组件时，组件标签内填入内容 -->
  <MyDialog>
    <div>你确认要删除么</div>
  </MyDialog>

  <MyDialog>
    <p>你确认要退出么</p>
  </MyDialog>

  <MyDialog></MyDialog>

  <hr>

  <DialogComp>

    <!-- 需要通过template标签包裹需要分发的结构，包成一个整体 -->
    <template v-slot:head>
      <div>我是大标题</div>
    </template>

    <template v-slot:content>
      <div>我是内容</div>
    </template>

    <template #footer>
      <button>取消</button>
      <button>确认</button>
    </template>

  </DialogComp>

</template>